<input id="themeName" type="hidden" th:value="${themeName}" />
<!-- 未登录状态 -->
<div
    sec:authorize="isAnonymous()"
    class="text-white h-7 font-medium pr-4 rounded-lg text-sm text-center"
>
    <input id="userName" type="hidden" value="" />
    <button title="登录" onclick="handleLogin()">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-7 h-7 text-gray-800 dark:text-white"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
        >
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
            ></path>
        </svg>
    </button>
</div>

<!-- 已登录状态 -->
<div sec:authorize="isAuthenticated()" class="flex items-center">
    <div th:with="user=${@userTag.getLoginUser()}" class="relative">
        <input id="userName" type="hidden" th:value="${user.userName}" />
        <!-- 用户头像和下拉按钮 -->
        <button
            id="dropdownUserAvatarButton"
            data-dropdown-toggle="dropdownAvatar"
            class="flex items-center space-x-2 ml-2 mr-4 rounded-full"
        >
            <img
                th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : ${imgPrefix+user.avatar}"
                class="w-7 h-7 rounded-full"
                th:alt="${user.nickName}"
            />
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M19 9l-7 7-7-7"></path>
            </svg>
        </button>

        <!-- 下拉菜单 -->
        <div
            id="dropdownAvatar"
            class="z-10 hidden bg-white dark:bg-zinc-900 divide-y divide-gray-100 rounded-lg shadow w-44"
        >
            <ul class="py-2 text-sm text-gray-700">
                <slot></slot>
                <li>
                    <button
                        onclick="handleLogout()"
                        class="w-full text-left px-4 py-2 hover:bg-gray-100"
                        >退出登录</button
                    >
                </li>
            </ul>
        </div>
    </div>
</div>

<script>
    // 导入全局工具模块中的登录相关函数
    import { handleLogin, handleLogout } from "@/utils/globalTools.js";

    // 将函数挂载到window对象，使其在全局可用
    window.handleLogin = handleLogin;
    window.handleLogout = handleLogout;
</script>
